<template>
    <div class="common-layout">
        <el-container class="is-vertical">
            <el-header class="layout_title">
                <h3>低代码平台</h3>
                <div class="right">
                    <span title="编辑器" @click="toPath('/lin/src/pages/editor/index.html')">
                        <svg class="Icon">
                            <use xlink:href="#editor"></use>
                        </svg>
                    </span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="150px">
                    <el-menu style="height: calc(100vh - 50px);" router :default-active="defaultActive"
                        class="el-menu-vertical-demo">
                        <el-menu-item :route="{ path: '/assembly' }" index="/assembly">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>组件库</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import {
    computed
} from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route)
const defaultActive = computed(() => {
    return route.path
})
const toPath = (url) => {
    window.open(url)
}
</script>
<style lang="less" scoped>
.layout_title {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: #262f3e;
    color: #fff;
    justify-content: space-between;

    .Icon {
        font-size: 20px;
        cursor: pointer;
    }
}
</style>